<template>
    <div>
        <h2>报修统计</h2>
        <div id="three"></div>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import http from '../util/api'
type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
onMounted(() => {
    var chartDom = document.getElementById('three')!;
    var myChart = echarts.init(chartDom);
    http('/chartDataThree').then(res => {
        let data = res.data
        option = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [5, 80],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: data
                }
            ]
        };
        option && myChart.setOption(option);

    })
})
</script>
<style scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;
}

#three {
    height: 4.0667rem;
}
</style>